<template>
  <div class="test">
    <!-- <upload-item></upload-item> -->
    <!-- <img :src="item" alt="" v-for="(item, index) in images" :key="index"> -->
  </div>
</template>
<script>
import axios from 'axios'
import UploadItem from '../components/UploadItem'
let timer
export default {
  components: {
    'upload-item': UploadItem
  },
  data() {
    return {
      show: false,
      dogPictures: [],
      RES_PATH: '../assets/image1',
      IMG_COUNT: 73,
      keyFrameIndex: -1
    }
  },
  mounted() {
    // http://sc1.111ttt.cn:8282/2018/1/03m/13/396131232171.m4a#.mp3
    // this.progressDownLoad()
    // setTimeout(() => {
    //   this.show = true
    // }, 500)
    // window.requestAnimationFrame(this.walk)
    this.loadResources()
  },
  methods: {
    // 加载图片
    loadResources() {
      let imagesPath = [];
      // 准备的图片
      for (let i = 1; i <= this.IMG_COUNT; i++) {
        imagesPath.push(`${this.RES_PATH}/${i}.png`);
      }
      let works = [];
      imagesPath.forEach(imgPath => {
        // 图片加载完后触发promise的resolve
        works.push(new Promise(resolve => {
          let img = new Image();
          img.onload = () => resolve(img);
          img.src = imgPath;
        }))
      })
      console.log(works)
      return new Promise(resolve => {
        // 借助Promise。all知道了所有的图都加载好了
        Promise.all(works).then(dogPictures => {
          this.dogPictures = dogPictures;
          console.log(this.dogPictures)
          resolve();
        })
        // 这里再套一个Promise是为了让调用者能够知道处理好了
      })
      console.log(this.dogPictures)
    },
    progressDownLoad() {
      axios({
        url: '/api/api_qrcode1.php?url=http%3a%2f%2fpic.brandzw.com%2f201901%2f30%2f1900136.jpg&catname=白酒',
        method: 'post',
        onDownloadProgress(progress) {
          console.log(progress)
        }
      })
    },
    onKeydown(e) {
      if (e.keyCode === 8) {
        e.preventDefault()
        if (this.text.length) {
          const start = this.$refs.input.selectionStart
          const end = this.$refs.input.selectionEnd
          const length = this.text.length
          if (end === length) {
            if (start !== end) {
              this.text = this.text.slice(0, start)
            } else {
              this.text = this.text.slice(0, start - 1)
            }
          } else {
            if (end === 0) {
              return
            }
            let p1
            let p2
            if (start !== end) {
              if (start === 0) {
                this.text = this.text.slice(end)
                this.$nextTick(() => {
                  this.$refs.input.setSelectionRange(0, 0)
                })
              } else {
                p1 = this.text.slice(0, start)
                p2 = this.text.slice(end)
                this.text = p1 + p2
                this.$nextTick(() => {
                  this.$refs.input.setSelectionRange(start, start)
                })
              }
            } else {
              p1 = this.text.slice(0, start - 1)
              p2 = this.text.slice(end)
              this.text = p1 + p2
              this.$nextTick(() => {
                this.$refs.input.setSelectionRange(start - 1, start - 1)
              })
            }
          }
        }
      }
    },
    onkeyup(e) {
    }
  }
}
</script>

<style scoped lang="scss">
.test {
  width: 7.5rem;
  height: 100%;
  background-color: #f6f6f6;
  .lav-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}
</style>
